import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hockey/extensions/jzx_widget_extension.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/services/jzx_user.dart';

import 'controller.dart';

class JzxAvatarUpgradeView extends GetView<JzxAvatarUpgradeController> {
  const JzxAvatarUpgradeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: const JzxAAppBar(
        title: 'Avater Frame',
        // titleWidget: Assets.images.icTitleAvaterFrame.image(height: 23),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
          child: Column(
            children: [
              SizedBox(
                height: kNavigationBarHeight,
              ),
              JzxBlurView(
                backgroundColor: const Color(0x26FFFFFF),
                padding: const EdgeInsets.all(12),
                radius: 12,
                child: Text(
                  'You can upgrade the avatar frame and level mark you obtain into a high-level avatar frame and a high-level title mark by spending gold coins.',
                  style: myAppColors.white.font_12,
                  textAlign: TextAlign.justify,
                ),
              ),
              JzxGaps.h22,
              JzxBlurView(
                  backgroundColor: const Color(0x26FFFFFF),
                  padding: const EdgeInsets.all(12),
                  radius: 12,
                  child: Column(
                    children: [
                      JzxGaps.h10,

                      ...JzxUserService.to.frameList.map((e) {
                        return Obx(
                          () {
                            final item = e.value;

                            return _JzxRow(
                              child1: Column(
                                children: [
                                  SizedBox(
                                    width: 80.w,
                                    height: 80.w,
                                    child: Stack(
                                      alignment: Alignment.center,
                                      children: [
                                        item.baseFrame.image(width: 44.w),
                                        if (!JzxUserService.to
                                            .isOwnLevel(item.level))
                                          InkWell(
                                            onTap: () {
                                              controller
                                                  .showUnlockConditions(e);
                                              // controller.showPurchase(e);
                                            },
                                            child: Assets.images.icFrameLockMask
                                                .image(width: 80.w),
                                          ),
                                      ],
                                    ),
                                  ),
                                  item.levelIcon.image(width: 56.w),
                                ],
                              ),
                              child2: Column(
                                children: [
                                  Stack(
                                    alignment: Alignment.center,
                                    children: [
                                      item.advancedFrame
                                          .image(width: 80.w)
                                          .paddingOnly(bottom: 5),
                                      if (!item.isUpgrade)
                                        InkWell(
                                          onTap: () {
                                            controller.showPurchase(e);
                                          },
                                          child: Assets.images.icFrameLockMask
                                              .image(width: 80.w),
                                        ),
                                    ],
                                  ),
                                  item.isUpgrade
                                      ? SizedBox(height: 28.w)
                                      : Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          children: [
                                            Assets.images.icMineCoin
                                                .image(width: 24.w),
                                            JzxGaps.w8,
                                            Text(
                                              '99',
                                              style: GoogleFonts.secularOne(
                                                color: myAppColors.white,
                                                fontSize: 20.sp,
                                              ),
                                            )
                                          ],
                                        )
                                ],
                              ),
                            );
                          },
                        );
                      }).toList(),
                      // ...List.generate(5, (i) {
                      //   final index = i + 1;
                      //   return _JzxRow(
                      //     child1: Column(
                      //       children: [
                      //         SizedBox(
                      //           width: 80.w,
                      //           height: 80.w,
                      //           child: Stack(
                      //             alignment: Alignment.center,
                      //             children: [
                      //               Image.asset(
                      //                   'assets/images/ic_frame$index.png',
                      //                   width: 44.w),
                      //               if (JzxUserService.to.userLevel < index)
                      //                 Assets.images.icFrameLockMask
                      //                     .image(width: 80.w),
                      //             ],
                      //           ),
                      //         ),
                      //         Image.asset('assets/images/ic_level$index.png',
                      //             width: 56.w),
                      //       ],
                      //     ),
                      //     child2: Column(
                      //       children: [
                      //         Image.asset(
                      //                 'assets/images/ic_frame_upgrade$index.png',
                      //                 width: 80.w)
                      //             .paddingOnly(bottom: 5),
                      //         Row(
                      //           mainAxisAlignment: MainAxisAlignment.center,
                      //           children: [
                      //             Assets.images.icCoin.image(width: 24.w),
                      //             JzxGaps.w8,
                      //             Text(
                      //               '99',
                      //               style: GoogleFonts.secularOne(
                      //                 color: myAppColors.white,
                      //                 fontSize: 20.sp,
                      //               ),
                      //             )
                      //           ],
                      //         )
                      //       ],
                      //     ),
                      //   );
                      // }),
                      JzxGaps.h10,
                    ],
                  ))
            ],
          ),
        ),
      ).backgroud(Assets.images.normalBgv),
    );
  }
}

class _JzxRow extends StatelessWidget {
  const _JzxRow({
    required this.child1,
    required this.child2,
  });

  final Widget child1;
  final Widget child2;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(flex: 1, child: child1),
        Expanded(
          flex: 1,
          child: Center(
              child: Assets.images.icConditionArrow
                  .image(width: 48.w)
                  .paddingOnly(bottom: 20.w)),
        ),
        Expanded(flex: 1, child: child2)
      ],
    ).paddingOnly(bottom: 0, left: 15, right: 15);
  }
}
